﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "CheckMaintenanceItemView";
    Layout = null;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <link href="~/libs/layui-v2.5.6/layui/css/layui.mobile.css" rel="stylesheet" />
</head>
<body>
    <div>
        <form class="layui-form layui-row layui-col-space16" style="margin-bottom:8px;margin-top:6px">
            <div class="layui-inline" style="width:340px;">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label"><b style="font-size:16px">项目编码</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="InquireCode" placeholder="请输入项目名称" class="layui-input layui-input-sm" style="width:200px">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="layuiTable()">
                    <i class="layui-icon  layui-icon-search"></i>
                    搜索
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border" onclick="layuirefresh()">
                    <i class="layui-icon   layui-icon-refresh"></i>
                    重置
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" onclick="AddPopLayers()">
                    <i class="layui-icon  layui-icon-add-1"></i>
                    新增
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" onclick="deleteCheck(0)">
                    <i class="layui-icon  layui-icon-delete"></i>
                    删除
                </button>
            </div>
        </form>
    </div>

    <table class="layui-hide" id="tabledata" lay-filter="tabledata"></table>
    <div id="laypage" style="margin-left:15px;margin-top:5px"></div>

    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue" lay-event="update">
                <i class="layui-icon  layui-icon-edit"></i>
                编辑
            </a>
            <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="delete" >
                <i class="layui-icon  layui-icon-delete"></i>
                删除
            </a>
        </div>
    </script>

    <div id="PopLayers" style="display: none;width:1000px">
        <form id="Vendorform" lay-filter="Vendorform" class="layui-form layui-row layui-col-space16 layui-form-pane" style="margin:15px">
            <div class="layui-inline" style="width:359px;">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label" style="width:125px"><b>项目编码</b></label>
                    <div class="layui-input-block">
                        <input type="text" name="ItemCode" lay-verify="required" lay-reqtext="请输入项目编码" placeholder="请输入项目编码" class="layui-input layui-input-sm" autocomplete="off" style="width:234px">
                    </div>
                </div>
            </div>
            <div class="layui-inline" style="width:96px">
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-bg-blue" onclick="autoGenerate()">自动生成</button>
                </div>
            </div>
            <div class="layui-inline" style="width:459px;">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label" style="width:125px"><b>项目名称</b></label>
                    <div class="layui-input-block">
                        <input type="text" name="ItemName" lay-verify="required" lay-reqtext="请输入项目名称" placeholder="请输入项目名称" class="layui-input layui-input-sm" autocomplete="off" style="width:334px">
                    </div>
                </div>
            </div>
            <div class="layui-inline" style="width:457px;">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label" style="width:125px"><b>项目类型</b></label>
                    <div class="layui-input-block">
                        <input type="radio" name="Type" value="1" title="设备检点">
                        <input type="radio" name="Type" value="2" title="设备保养">
                    </div>
                </div>
            </div>
            <div class="layui-inline" style="width:457px;margin-left:19px">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label" style="width:125px"><b>是否启用</b></label>
                    <div class="layui-input-block">
                        <input type="radio" name="IsNo" value="1" title="是">
                        <input type="radio" name="IsNo" value="0" title="否">
                    </div>
                </div>
            </div>
            <div class="layui-inline layui-form-text" style="width:960px;">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label" style="width:956px"><b>供应商简介</b></label>
                    <div class="layui-input-block">
                        <textarea name="ProjectContent" placeholder="请输入供应商简介" class="layui-textarea" style="width:956px"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-inline" style="width:960px;">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <label class="layui-form-label" style="width:125px"><b>标准</b></label>
                    <div class="layui-input-block">
                        <input type="text" name="Standard" placeholder="请输入标准" class="layui-input layui-input-sm" autocomplete="off" style="width:835px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="float:right">
                <input type="text" name="Id" hidden>
                <button class="layui-btn" lay-submit lay-filter="demo2" onclick="Confirm()">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
    <script src="~/libs/jquery/jquery.js"></script>
    @*<script src="~/Scripts/layui-v2.5.6/layui/lay/modules/leftmenu.js"></script>*@
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        //全局变量
        var VendorInfo={};
        var index={};
        var list = [];
        var rowCount = 0;
        var pageCount = 0;
        var pageIndex = 1;
        var pageSize = 10;
        var tableStatusdata=[];

        //Layui
        var table = layui.table;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var form = layui.form;

        //Layui页面渲染事件
        layui.use(function(){
            layuiTable();
            //显示点击行事件
            table.on('tool(tabledata)', function(obj){
                if(obj.event=='delete'){
                    tableStatusdata=[];
                    tableStatusdata.push(obj.data)
                    deleteCheck(1);
                }
                if(obj.event=='update'){
                    UpdatePopLayers(obj.data)
                }
            })
        })

        //打开添加弹出框事件
        function AddPopLayers() {
            //清空表单
            form.val('Vendorform',{
                'Id':'0',
                'ItemCode':'',
                'ItemName':'',
                'Type':1,
                'IsNo':1,
                'ProjectContent':'',
                'Standard':'',
            })
            //打开弹出层
            index=layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['添加设备点检保养项目', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#PopLayers'), // 捕获的元素
                area: ['1000px', '475px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
        }

        //自动生成事件
        function autoGenerate(){
            var date=new Date();
            var code="SUB"+(date.getMonth()+1).toString().padStart(2,'0')+date.getDate().toString().padStart(2,'0')+date.getHours().toString().padStart(2,'0')+date.getMinutes().toString().padStart(2,'0')+date.getSeconds().toString().padStart(2,'0')
            $("[name='ItemCode']").val(code);
        }

        //确认事件
        function Confirm () {
            $("[name='Id']").val()=='0'?AddCheck():UpdateCheck()
        }

        function AddCheck() {
            // 监听提交事件
            form.on('submit(demo2)', function(data){
                return false; // 阻止表单跳转
            })
            var Id=$("[name='Id']").val()
            var ItemCode=$("[name='ItemCode']").val();
            var ItemName=$("[name='ItemName']").val();
            var Type=$("[name='Type']").val();
            var IsNo=$("[name='IsNo']").val();
            var ProjectContent=$("[name='ProjectContent']").val();
            var Standard=$("[name='Standard']").val();
            $.ajax({
                url: "/CheckMaintenanceItem/Insert",
                type: "post",
                async: false,
                datatype: "json",
                data:{Id,ItemCode,ItemName,Type,IsNo,ProjectContent,Standard},
                success: function (res) {
                    if(res==1){
                        layer.msg('添加成功', {
                            time: 5000, // 5s 后自动关闭
                            offset: '16px'
                        });
                        layer.close(index);
                        layuiTable();
                    }
                    if(res!=1){
                        layer.msg('添加失败', {
                            time: 5000, // 5s 后自动关闭
                            offset: '16px'
                        });
                    }
                }
            })
        }

        //显示供应商信息
        function layuiTable() {
            var InquireCode=$("#InquireCode").val()
            $.ajax({
                url: "/CheckMaintenanceItem/PageList",
                type: "get",
                async: false,
                datatype: "json",
                data:{
                    itemCode:InquireCode,
                    pageIndex:pageIndex,
                    pageSize:pageSize,
                },
                success:function (res) {
                    list =res.queryable;
                    rowCount=res.rowCount;
                    pageCount=res.pageCount;
                }
            })
            //显示表格
            table.render({
                elem: '#tabledata',
                id: 'id', // 自定义 id 索引
                height: '745px',
                cols: [[ //标题栏
                      {checkbox: true, fixed: true},
                      {field: 'itemCode', title: '项目编码'},
                      {field: 'itemName', title: '项目名称'},
                      {field: 'type', title: '项目类型', templet: function(d){
                          if(d.isNo === 1){
                              return '<span>设备检点</span>';
                          } else {
                              return '<span>设备保养</span>';
                          }
                      }},
                      {field: 'projectContent', title: '项目内容'},
                      {field: 'standard', title: '标准'},
                      {field: 'isNo', title: '是否启用', templet: function(d){
                          if(d.isNo === 1){
                              return '<span>是</span>';
                          } else {
                              return '<span>否</span>';
                          }
                      }},
                      {fixed: 'right', title:'操作', templet: '#toolDemo',width: 140},
                ]],
                data:list,
                //skin: 'line', // 表格风格
                even: true,
                //page: true, // 是否显示分页
                //limits: [5, 10, 15],
                //limit: 5 // 每页默认显示的数量
            });

            // 完整显示分页
            laypage.render({
                elem: 'laypage', // 元素 id
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                count: rowCount, // 数据总数
                limit: pageSize,
                curr:pageIndex,
                limits:[10,20,30],
                jump: function(obj){
                    if(pageIndex!=obj.curr||pageSize!=obj.limit){
                        pageIndex=obj.curr;
                        pageSize=obj.limit;
                        layuiTable();
                    }
                }
            });
        }

        //点击确认事件
        function clickRows(){
           var tableStatus = table.checkStatus('id');
           console.log(tableStatus.data);
           tableStatusdata=tableStatus.data // 选中行的数据
        }

        //查询信息重置
        function layuirefresh () {
            $("#InquireCode").val("");
        }

        //删除供应商信息
        function deleteCheck (i) {
            index=layer.confirm('是否确定删除？', {
                title: false,
                area: ['100px', '125px'],
                btn: ['确定', '取消'], //按钮
                offset: '16px',
                btnAlign: 'c' //按钮水平居中对齐
            },
            function(){
                if(i==0){
                    clickRows();
                }
                if(tableStatusdata.length==0){
                    layer.msg('至少选择一项', {
                        time: 2000, // 2s 后自动关闭
                        offset: '16px'
                    });
                    return;
                }
                var id=tableStatusdata.map(x=>x.id);
                layer.close(index);
                $.ajax({
                    url: "/CheckMaintenanceItem/Deleted",
                    type: "post",
                    async: false,
                    datatype: "json",
                    data:{id:id.toString()},
                    success: function (res) {
                        if(res==1){
                            layer.msg('删除成功', {
                                time: 1000, // 1s 后自动关闭
                                offset: '16px'
                            });
                            layuiTable();
                        }
                        else{
                            layer.msg('删除失败', {
                                time: 1000, // 1s 后自动关闭
                                offset: '16px'
                            });
                        }
                    }
                })
            },
            function(){
                layer.msg('取消成功', {
                    time: 5000, // 5s 后自动关闭
                    offset: '16px'
                });
            })
        }

        //打开编辑弹出框事件
        function UpdatePopLayers(data) {
            //清空表单
            form.val('Vendorform',{
                'Id':data.id,
                'ItemCode':data.itemCode,
                'ItemName':data.itemName,
                'Type':data.type,
                'IsNo':data.isNo,
                'ProjectContent':data.projectContent,
                'Standard':data.standard,
            })
            //打开弹出层
            index=layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['编辑设备点检保养项目', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#PopLayers'), // 捕获的元素
                area: ['1000px', '900px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
        }

        //编辑设备检点保养项目
        function UpdateCheck() {
            // 监听提交事件
            form.on('submit(demo2)', function(data){
                return false; // 阻止表单跳转
            })
            var Id=$("[name='Id']").val()
            var ItemCode=$("[name='ItemCode']").val();
            var ItemName=$("[name='ItemName']").val();
            var Type=$("[name='Type']").val();
            var IsNo=$("[name='IsNo']").val();
            var ProjectContent=$("[name='ProjectContent']").val();
            var Standard=$("[name='Standard']").val();
             $.ajax({
                url: "/CheckMaintenanceItem/UpdateRepeatability",
                type: "get",
                async: false,
                datatype: "json",
                data:{
                    id:Id,
                    itemCode:ItemCode,
                },
                success:function (res) {
                    if(res==-1){
                        layer.msg('供应商编码已注册,请重新输入', {
                            time: 5000, // 5s 后自动关闭
                            offset: '16px'
                        });
                    }
                    else{
                        $.ajax({
                            url: "/CheckMaintenanceItem/Update",
                            type: "post",
                            async: false,
                            datatype: "json",
                            data:{Id,ItemCode,ItemName,Type,IsNo,ProjectContent,Standard},
                            success: function (res) {
                                if(res==1){
                                    layer.msg('编辑成功', {
                                        time: 5000, // 5s 后自动关闭
                                        offset: '16px'
                                    });
                                    layuiTable();
                                    layer.close(index);
                                }
                                if(res==0){
                                    layer.msg('编辑失败', {
                                        time: 5000, // 5s 后自动关闭
                                        offset: '16px'
                                    });
                                }
                            }
                        })
                    }
                }
            })
        }
    </script>
</body>
</html>
